<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Datagrid_ Pagination</title>
    <link rel="stylesheet" type="text/css" href="/easyui.css">
    <link rel="stylesheet" type="text/css" href="/icon.css">
    <link rel="stylesheet" type="text/css" href="/demo.css">
    <script src="/jquery.min.js"></script>
    <script src="/jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg"  style="width:700px;height:300px">
<thead>
<tr>
    <th data-options="field:'itemid'">Item ID</th>
    <th data-options="field:'productid'">Product</th>
    <th data-options="field:'listprice',align:'right'">List Price</th>
    <th data-options="field:'attr1'">Attribute</th>
</tr>
</thead>
<tbody>
<tr>
    <td>EST-1</td><td>FI-SW-01</td><td>36.50</td><td>Large</td>
</tr>
<tr>
    <td>EST-10</td><td>K9-DL-01</td><td>18.50</td><td>Spotted Adult Female</td>
</tr>
<tr>
    <td>EST-11</td><td>RP-SN-01</td><td>28.50</td><td>Venomless</td>
</tr>
<tr>
    <td>EST-12</td><td>RP-SN-01</td><td>26.50</td><td>Rattleless</td>
</tr>
<tr>
    <td>EST-13</td><td>RP-LI-02</td><td>35.50</td><td>Green Adult</td>
</tr>
<tr>
    <td>EST-1</td><td>FI-SW-01</td><td>36.50</td><td>Large</td>
</tr>
<tr>
    <td>EST-10</td><td>K9-DL-01</td><td>18.50</td><td>Spotted Adult Female</td>
</tr>
<tr>
    <td>EST-11</td><td>RP-SN-01</td><td>28.50</td><td>Venomless</td>
</tr>
<tr>
    <td>EST-12</td><td>RP-SN-01</td><td>26.50</td><td>Rattleless</td>
</tr>
<tr>
    <td>EST-13</td><td>RP-LI-02</td><td>35.50</td><td>Green Adult</td>
</tr>
<tr>
    <td>EST-1</td><td>FI-SW-01</td><td>36.50</td><td>Large</td>
</tr>
<tr>
    <td>EST-10</td><td>K9-DL-01</td><td>18.50</td><td>Spotted Adult Female</td>
</tr>
<tr>
    <td>EST-11</td><td>RP-SN-01</td><td>28.50</td><td>Venomless</td>
</tr>
<tr>
    <td>EST-12</td><td>RP-SN-01</td><td>26.50</td><td>Rattleless</td>
</tr>
<tr>
    <td>EST-13</td><td>RP-LI-02</td><td>35.50</td><td>Green Adult</td>
</tr>
<tr>
    <td>EST-1</td><td>FI-SW-01</td><td>36.50</td><td>Large</td>
</tr>
<tr>
    <td>EST-10</td><td>K9-DL-01</td><td>18.50</td><td>Spotted Adult Female</td>
</tr>
<tr>
    <td>EST-11</td><td>RP-SN-01</td><td>28.50</td><td>Venomless</td>
</tr>
<tr>
    <td>EST-12</td><td>RP-SN-01</td><td>26.50</td><td>Rattleless</td>
</tr>
<tr>
    <td>EST-13</td><td>RP-LI-02</td><td>35.50</td><td>Green Adult</td>
</tr>
<tr>
    <td>EST-1</td><td>FI-SW-01</td><td>36.50</td><td>Large</td>
</tr>
<tr>
    <td>EST-10</td><td>K9-DL-01</td><td>18.50</td><td>Spotted Adult Female</td>
</tr>
<tr>
    <td>EST-11</td><td>RP-SN-01</td><td>28.50</td><td>Venomless</td>
</tr>
<tr>
    <td>EST-12</td><td>RP-SN-01</td><td>26.50</td><td>Rattleless</td>
</tr>
<tr>
    <td>EST-13</td><td>RP-LI-02</td><td>35.50</td><td>Green Adult</td>
</tr>

<tr>
    <td>EST-1</td><td>FI-SW-01</td><td>36.50</td><td>Large</td>
</tr>
<tr>
    <td>EST-10</td><td>K9-DL-01</td><td>18.50</td><td>Spotted Adult Female</td>
</tr>
<tr>
    <td>EST-11</td><td>RP-SN-01</td><td>28.50</td><td>Venomless</td>
</tr>
<tr>
    <td>EST-12</td><td>RP-SN-01</td><td>26.50</td><td>Rattleless</td>
</tr>
<tr>
    <td>EST-13</td><td>RP-LI-02</td><td>35.50</td><td>Green Adult</td>
</tr>
</tbody>
</table>

<script  type="text/javascript">
    <!--给数据表格初始化-->
    $("#dg").datagrid({
        title:"DataGrid Selection",
        singleSelect:true,
        autoRowHeight:false,
        pagination:true,
        pageSize:10,
        rownumbers:true
    });
</script>
</body>
</html>